<template>
	<view>
		<view id="team" v-if='$auth.hasRoleOr(["admin", "common"])'>
			<view class="card" style="background: linear-gradient(314deg,#3d8cff,#49a8ff);"
				@click="$tab.navigateTo('/pages/home/invite?id=0')">
				邀请新成员>
			</view>
			<view class="card" style="background: linear-gradient(315deg,#ff983f,#ffb36d);"
				@click="$tab.navigateTo('/pages/team/tdzj')">
				团队战绩>
			</view>
			<view class="card" style="background: linear-gradient(317deg,#57c376,#6adb8a);"
				@click="$tab.navigateTo('/pages/mine/rankingList/index')">
				荣誉榜>
			</view>
		</view>
		<view id="team" style="background-color: aliceblue;border-radius: 10rpx;" v-if='$auth.hasRoleOr(["admin", "common"])'>
			<view class="td">
				<h2>{{ statis.rs}}</h2>
				<text>团队人数</text>
			</view>
			<view class="td">
				<h2>{{ zeroTwo(statis.zsr)}}</h2>
				<text>团队总收入</text>
			</view>
			<view class="td">
				<h2>{{zeroTwo(statis.zsr_tc)}}</h2>
				<text>您累计总收</text>
			</view>
		</view>
		<view style="margin: 10px 18.5px 0;">
				<uni-notice-bar style="background-color: white" show-icon scrollable :text="msg" />
		</view>
	
		<table :loading="loading" v-if='$auth.hasRoleOr(["admin", "common"])'>
			<template v-for="(item,index) in list">
				<tr>
					<td class="td">{{ disKeyword(item.keyword)}}</td>
					<td class="td" style="font-size: 20px;color: red;">{{disIncome(item)}}</td>
				</tr>
				<tr>
					<td class="td">{{ item.create_time.replace('T',' ')}}</td>
					<td class="td">贡献收入</td>
				</tr>
				<tr style="background-color: aliceblue;">
					<td colspan="2"></td>
				</tr>
			</template>
		</table>
	</view>
</template>

<script>
	import {
		teamStatis,
		teamOrders,
		msg
	} from '@/api/team.js'

	import {
		zeroTwo
	} from '@/utils/common.js'

	export default {
		data() {
			return {
				statis: {
					rs: 0,
					zsr: 0,
					zsr_tc: 0
				},
				msg: '欢迎注册使用！',

				loading: true,
				list: []
			}
		},
		mounted() {
			teamStatis().then(res => {
				if (res.code == 200) {
					this.statis = res
				}
			})
			msg('groupMsg').then(res => {
				this.msg = res
			})
			teamOrders({
				pageSize: 6,
				pageNum: 1,
				payState: 'SUCCESS'
			}).then(res => {
				this.list = res.rows
				this.loading = false
			})
		},
		methods: {
			zeroTwo,
			disKeyword(k) {
				let index = k.indexOf('::')
				if (index == -1) {
					return k
				}
				return k.substring(0, index)
			},
			disIncome(item) {
				if (this.$store.state.user.name == item.user_name) {
					return zeroTwo(item.brokerage)
				} else {
					return zeroTwo(item.royalty)
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(180deg, #c4d6ff, #f7f8fa);
		min-height: 100%;
	}

	#team {
		margin: 10px 18.5px 0;
		text-align: center;
		display: flex;
		justify-content: space-between;

		.card {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 28vw;
			height: 130rpx;
			border-radius: 16rpx;
			color: #fff;
		}

		.td {
			width: 28vw;
			align-items: center;
			padding: 36rpx 0;
		}
	}

	table {
		margin: 10px 18.5px 0;
		background-color: #fff;
		border-radius: 4px;
	}

	.td {
		width: 50vw;
		padding-top: 2px;
		text-align: center;
	}
</style>